<!DOCTYPE html>
<html lang="zh-cmn-Hans-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="/js/jquery.js"></script>
    <script type="text/javascript" src="/layui.all.js"></script>
    <style type="text/css">
        @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap');

        /** {*/
        /*    margin: 0;*/
        /*    padding: 0;*/
        /*    box-sizing: border-box;*/
        /*}*/

        body {
            /*display: flex;*/
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: #f3fff6;
            font-family: 'Raleway', sans-serif;
            font-weight: bold;
            overflow: hidden;
        }

        a {
            position: relative;
            display: inline-block;
            padding: 25px 30px;
            margin: 40px 0;
            color: #03e9f4;
            text-decoration: none;
            text-transform: uppercase;
            transition: 0.5s;
            letter-spacing: 4px;
            overflow: hidden;
        }

        a:hover {
            background: #03e9f4;
            color: #050801;
            box-shadow: 0 0 5px #03e9f4,
            0 0 25px #03e9f4,
            0 0 50px #03e9f4,
            0 0 200px #03e9f4;
            -webkit-box-reflect: below 1px linear-gradient(transparent, #0005);
        }

        a:nth-child(1) {
            filter: hue-rotate(270deg);
        }

        a:nth-child(2) {
            filter: hue-rotate(110deg);
        }

        a span {
            position: absolute;
            display: block;
        }

        a span:nth-child(1) {
            top: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, transparent, #03e9f4);
            animation: animate1 1s linear infinite;
        }

        @keyframes animate1 {
            0% {
                left: -100%;
            }
            50%, 100% {
                left: 100%;
            }
        }

        a span:nth-child(2) {
            top: -100%;
            right: 0;
            width: 2px;
            height: 100%;
            background: linear-gradient(180deg, transparent, #03e9f4);
            animation: animate2 1s linear infinite;
            animation-delay: 0.25s;
        }

        @keyframes animate2 {
            0% {
                top: -100%;
            }
            50%, 100% {
                top: 100%;
            }
        }

        a span:nth-child(3) {
            bottom: 0;
            right: 0;
            width: 100%;
            height: 2px;
            background: linear-gradient(270deg, transparent, #03e9f4);
            animation: animate3 1s linear infinite;
            animation-delay: 0.50s;
        }

        @keyframes animate3 {
            0% {
                right: -100%;
            }
            50%, 100% {
                right: 100%;
            }
        }


        a span:nth-child(4) {
            bottom: -100%;
            left: 0;
            width: 2px;
            height: 100%;
            background: linear-gradient(360deg, transparent, #03e9f4);
            animation: animate4 1s linear infinite;
            animation-delay: 0.75s;
        }

        @keyframes animate4 {
            0% {
                bottom: -100%;
            }
            50%, 100% {
                bottom: 100%;
            }
        }
    </style>
    <title>
        Excel在线转换Word（题库类）
    </title>
</head>
<body>
<div>
    <div style="margin-top: 50px">
        <p >
            <font style="color: red;font-size: 20px;">*</font> 使用说明
        </p>
        <p style="margin-left: 20px">
            1. 上传的文件必须是Excel（以 .xls 或 .xlsx结束的文件） <a id="downModel" href="javascript:void(0)" style="color: black; text-transform: none; letter-spacing: normal; padding: 0px; display: contents;"><u onclick="loadDown('modelFile')">下载Excel模板</u></a>
        </p>
        <p style="margin-left: 20px">
            2. 选择文件之后等待“上传成功”提示之后再进行转换
        </p>
        <p style="margin-left: 20px">
            3. 为避免下载的文件出现格式问题，请使用WPS打开
        </p>
        <HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="100%" color=#987cb9 SIZE=3>
    </div>

    <div class="content" style="margin-top: 2%">
        <div class="container">
            <div style="display: none">
                <button type="button" class="layui-btn" id="uploadExample">选择文件</button>
                <input type="text" id="finalExcelName" value="">
                <input type="text" id="finalWordName" value="">
                <input type="text" id="fileId" value="">
            </div>
            <div>
                <a id="upload" onclick="upload()" style="margin-left: 46%;">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    选择文件
                </a>
            </div>
            <div style="display: none;">
                <a id="setFormat" onclick="openWindow('format')" style="margin-left: 46%;">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    设置格式
                </a>
            </div>
            <div style="display: none;">
                <a id="transform" onclick="transform()" style="margin-left: 47%;">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    转换
                </a>
            </div>
            <div style="display: none;">
                <a href="javascript:void(0)" id="loadDown" onclick="loadDown('convertFile')" style="margin-left: 45%;">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    下载Word
                </a>
            </div>
        </div>
        <div class=“layui-form”>
            <div class="layui-inline">
                <label class="layui-form-label">转换字段：</label>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">分类字段：</label>
            </div>
        </div>
    </div>

    <div style="margin-top: 5%">
        <HR>
        <p style="margin-left: 42%;font:15px '隶书';">
            |如果有良好的意见或建议，请 <a  href="javascript:void(0)" style="color: black; text-transform: none; letter-spacing: normal; padding: 0px; display: contents;"><u onclick="openWindow('author')">联系作者</u></a> |
        </p>
        <p style="margin-left: 45%;font:15px '隶书';">
             版权所有 © 天堃
        </p>
    </div>
</div>
</body>
<script type="text/javascript">

    var status = true;
    /**
     * 复选框控件
     */
    layui.use(['form'], function(){
        var form = layui.form();
    });

    /**
     * 上传文件控件
     */
    layui.use('upload', function () {
        var upload = layui.upload;
        //上传文件
        upload.render({
            elem: '#uploadExample'
            , url: '/file/upload'
            , accept: 'file'
            , done: function (result) {
                if (result.code === "200") {
                    $("#finalExcelName").attr("value", result.data);
                    $.ajax({
                        type: "GET",
                        url: "/file/readHeader",
                        data: {excelName: result.data},
                        dataType: "JSON",
                        success: function (res) {
                            if (result.code === "200") {
                                $("#fileId").attr("value", result.data);
                                layer.msg('上传成功', {icon: 6, time: 1000});
                            }
                        }
                    });
                } else {
                    console.log(result.msg)
                    layer.msg('上传失败，请联系管理员', {icon: 6});
                }
            }
        });
    });

    /**
     * 弹窗
     */
    function Popup(type,val){
        var content;
        var title;
        var area;
        if (type === 0){
            title = ['联系作者','font-size:18px;'];
            area = '500px';
            content = "<p > 网易邮箱：ytk18398924574@163.com</p><p > QQ邮箱：1829924804@qq.com</p><p > CSDN私信：<a href='https://blog.csdn.net/weixin_43573652?type=sub&subType=fans&spm=1001.2014.3001.5347' style='color: black; text-transform: none; letter-spacing: normal; padding: 0px; display: contents;'><u>弹烟灰的老狗</u></a></p>"
        }
        if (type === 1){
            var html;
            for (var i = 0; i < val.length; i++){

            }
            area = '500px';
            title = ['设置格式','font-size:18px;'];
            content = html;
        }
        layui.use('layer',function(){
            var layer=layui.layer;
            layer.open({
                type: type,
                title: title,
                closeBtn: 0,
                area: area,
                content: content
            })

        })
    }


    /**
     * 上传文件
     */
    function upload() {
        $("#uploadExample").click();
    }

    /**
     * 打开联系作者弹窗或设置弹窗
     */
    function openWindow(windowType) {
        if (windowType === "author") {//联系作者弹窗
            Popup(0,"");
        }else {
            // if (judgeEmpty($("#finalExcelName").val())){//设置格式弹窗
            //     layer.msg('请上传文件', {icon: 2});
            //     return ;
            // }
            status = false;

            // var fileId = $("#fileId").val();
            var fileId = "56";
            $.ajax({
                type: "GET",
                url: "/file/getHeader",
                data: {fileId: fileId},
                dataType: "JSON",
                success: function (result) {
                    if (result.code === "200") {
                        //打开弹窗
                        console.log(result.data)
                        Popup(2,result.data);
                    }else {
                        layer.msg(result.msg, {icon: 6});
                    }
                }
            });
        }
    }

    /**
     * 转换文件
     */
    function transform() {
        var finalExcelName = $("#finalExcelName").val();
        if (judgeEmpty(finalExcelName)){
            layer.msg('请上传文件', {icon: 2});
            return ;
        }else if (status){
            layer.msg('请设置格式', {icon: 2});
            return ;
        }
        $.ajax({
            type: "GET",
            url: "/file/readAndWrit",
            data: {excelName: finalExcelName},
            dataType: "JSON",
            success: function (result) {
                if (result.code === '200') {
                    $("#finalWordName").attr("value", result.data);
                    layer.msg('转换成功', {icon: 6, time: 1000});
                    $("#loadDown").show()
                } else {
                    layer.msg('转换失败，请联系管理员', {icon: 5});
                }
            }
        });

    }

    /**
     * 下载文件
     */
    function loadDown(fileType) {
        var finalWordName;
        if (fileType === "modelFile") {
            finalWordName = "modelFile.xlsx";
            $("#downModel").attr("href", "http://106.14.39.205:8084/file/downLoad?fileName=" + finalWordName);
        }else {
            finalWordName = $("#finalWordName").val();
            if (judgeEmpty($("#finalExcelName").val())){
                layer.msg('请上传文件', {icon: 2});
                return ;
            }else if (status){
                layer.msg('请设置格式', {icon: 2});
                return ;
            }else if (judgeEmpty(finalWordName)){
                layer.msg('请转换文件', {icon: 2});
                return ;
            }
            $("#loadDown").attr("href", "http://106.14.39.205:8084/file/downLoad?fileName=" + finalWordName);
        }
    }

    /**
     * 判空
     */
    function judgeEmpty(val){
        return val === "" || val === null || val === undefined;
    }

</script>
</html>